<template>
	<view class="content" :data-theme='$Im.getTheme()' :class="[$Im.getTheme()]">

		<!-- #ifdef H5 -->
		<view class="sxran-im-chat-content" v-if="sys.platform == 'windows'">
			<view class="left chat-tools">
				<sxran-im-side :currentTab='currentTab' @change='onChange'></sxran-im-side>
			</view>
			<view class="user-list">
				<view class="user-list-body">
					<liaison-list v-show='currentTab == 0' @change='onListChange'></liaison-list>
					<chat-list v-show='currentTab == 1' ></chat-list>
					<my-page v-show='currentTab == 2'></my-page>
				</view>
				<sxran-im-tabs :tabs='tabs' @change='onChange' :active='currentTab'></sxran-im-tabs>
			</view>
			<view class="right">
				<sxran-im-chat v-if="!navigateTo"></sxran-im-chat>
				<friend-notice v-else-if="navigateTo == 'friend-notice'"></friend-notice>
				<friend-tongan v-else-if="navigateTo == 'friend-tongan'"></friend-tongan>
				<friend-group v-else-if="navigateTo == 'friend-group'"></friend-group>
				<system-notice v-else-if="navigateTo == 'system-notice'"></system-notice>
			</view>
		</view>
		<!-- 非浏览器 webapp -->
		<view class="sxran-im-chat-content flex-direction-column" v-else>
			<view class="user-list-body">
				<liaison-list v-show='currentTab == 0'></liaison-list>
				<chat-list v-show='currentTab == 1'></chat-list>
				<my-page v-show='currentTab == 2'></my-page>
			</view>
			<sxran-im-tabs :tabs='tabs' @change='onChange' :active="currentTab" ></sxran-im-tabs>
		</view>


		<!-- #endif -->

		<!-- #ifndef H5 -->
		<view class="sxran-im-chat-content flex-direction-column">
			<view class="user-list-body">
				<liaison-list v-show='currentTab == 0'></liaison-list>
				<chat-list v-show='currentTab == 1'></chat-list>
				<my-page v-show='currentTab == 2'></my-page>
			</view>
			<sxran-im-tabs :tabs='tabs' @change='onChange' :active="currentTab" ></sxran-im-tabs>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import friendNotice from '/uni_modules/sxran-im-modules/pages/friend-notice/friend-notice'
	import friendTongan from '/uni_modules/sxran-im-modules/pages/friend-tongan/friend-tongan'
	export default {
		components: {
			friendNotice,
			friendTongan
		},
		data() {
			return {
				num: 100,
				active: 0,
				sys: uni.$u.sys(),
				navigateTo:null,
				tabs:[{
						icon: 'staff',
						text: '通讯录',
						code:0,
						badgeText:0
					},
					{
						icon: 'chat',
						text: '消息',
						code:1,
						badgeText:0
					},
					{
						icon: 'person',
						text: '我的',
						code:2,
						badgeText:0
					}
				]
			}
		},
		computed: {
			userInfo:function(){
				return uni.$Im.getUser();
			},
			unreadCount:function(){
				return uni.$Im.getUnreadCount();
			},
			notificationUnreadCount:function(){
				return uni.$Im.getNotificationUnreadCount();
			},
			currentTab:function(){
				return uni.$Im.getCurrentTab();
			},
		},
		watch:{
			notificationUnreadCount(value){
				this.uepateTabsBadge(value);
			},
			unreadCount(value){
				this.uepateTabsBadge(value);
			},
		},
		mounted() {
		},
		methods: {
			uepateTabsBadge(value){
				const tab = this.tabs.find(item=> item.code == this.currentTab);
				tab.badgeText = value;
			},
			onListChange(path){
				// #ifdef H5
				this.navigateTo = path;
				
				// #endif
				
				// #ifndef H5
				uni.navigateTo({
					url: '/page/'+path
				})
				// #endif
			},
			onChange(code) {
				this.active = code;
				uni.$Im.setCurrentTab(code);
				console.log(code)
			},
			iconClick() {
				console.log('iconClick')
			},
			scrolltolower() {
				this.num++
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: var(--uni-bg-color);
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.user-list-body {
			flex-grow: 1;
			overflow: hidden;
		}

		.sxran-im-chat-content {
			display: flex;
			flex-direction: row;
			overflow: hidden;
			height: 100%;

			.left {
				width: 80px;
				// height: 100vh;
				background-color: var(--uni-bg-color-grey);
				padding: $uni-spacing-col-sm;
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-shrink: 0;

				.tool-box {
					// width: 40px;
					// height: 40px;
					// background-color: var(--uni-bg-color);
					border-radius: $uni-border-radius-lg;
					margin-top: $uni-spacing-col-lg;
					padding: $uni-spacing-col-sm;

					&:hover {
						background-color: var(--uni-bg-color-hover);
					}

					// &:last-of-type {
					// 	margin-top: auto;
					// }
				}
			}

			.user-list {
				width: 320px;
				background-color: var(--uni-bg-color);
				display: flex;
				flex-direction: column;
				flex-shrink: 0;
			}

			.right {
				// width: 0;
				flex-grow: 1;
				flex-shrink: 1;
				// background-color: #dbf2ff;
				display: flex;
				flex-direction: column;
				background: linear-gradient(to right bottom, var(--uni-bg-color-assist), var(--uni-bg-color-envoy));
				// background: linear-gradient(to right bottom, var(--uni-bg-color-assist), var(--uni-bg-color-envoy));
				// padding: $uni-spacing-row-lg 0 $uni-spacing-row-lg $uni-spacing-row-lg;
				.chat-content {
					flex-grow: 1;
					flex-shrink: 1;
				}

				.chat-input-content {
					position: relative;
					// background-color: #68a8ed;
					min-height: 300px;

					&::after {
						position: absolute;
						content: '';
						height: 1px;
						width: 200%;
						top: 0;
						background-color: var(--uni-border-color);
						transform: scale(0.5);
						transform-origin: left;
						left: 0;
					}
				}
			}
		}

		.flex-direction-column {
			flex-direction: column;
		}
	}

	@media screen {}
</style>